<template>
    <div class="com-container">
        <!-- 显示图表 -->
        <div class="com-chart" ref="trend_ref">

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartInstance:null,
            //服务器获取数据
            allData:null,
        }
    },
    mounted() {
        this.initChart()
        this.getData()
        //分辨率适配
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        //取消监听
        window.removeEventListener('resize', this.screenAdapter)
    },
    methods: {
         initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.trend_ref,'chalk')
            const initOption = {

            }
            this.chartInstance.setOption(initOption)
         },
         async getData(){
                const res =  await this.$http.get('trend')
                this.updateChart()
         },
         updateChart(){
            //处理数据
            const dataOption = {

            }
            this.chartInstance.setOption(dataOption)
         },
         screenAdapter(){
            const adapterOption = {}
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()

         }
    },
}
</script>

<style>

</style>